<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Get binary image data from remote image</title>
	<script src="../scripts/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
	$().ready(function(){
		$('#form').submit(function(){
			if ($('#image').val()) {
				// create a new image object to hold the remote image
				var img = new Image();
				img.crossOrigin = "Anonymous";
				img.src = $('#image').val();

				// force load image
				$(img).load(function(){

					// create a canvas object
					var canvas = document.createElement("canvas");
					canvas.width = img.width;
					canvas.height = img.height;

					// copy image contents to canvas
					var ctx = canvas.getContext("2d");
					ctx.drawImage(img, 0, 0);

					// get data from canvas object
					var data = canvas.toDataURL("image/png");

					// set results
					$('#result_data').text(data);
					$('#result_image').text('').append(canvas);
				})
			} else {
				alert('Enter a valid image path');
			}
			return false;
		})
	});
	</script>
</head>
<body>
	<h1>Get binary image data from remote image</h1>
	<form id="form">
		<!--http://192.168.123.3/api/getCategoryImage/123/c123-4 -->
		
		<input type="text" id="image" size="100" style="padding:5px" value="http://192.168.123.3:8000/api/getCategoryImage/123/c123-4"/>
		<input type="submit" value="GET!"/>
	</form>
	<h2>Data</h2>
	<textarea id="result_data" style="width:500px;height:200px"></textarea>
	<h2>Image</h2>
	<div id="result_image"></div>
</body>
</html>
